<template>
    <div>
        <div>
            <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div style="margin-top: 30px;">
            <span class="p1">密码登录</span><br>
            <span class="p2">未注册的手机号验证后自动注册</span>
        </div>
        <div style="margin-top:70px;position: relative;">
            <input type="text" v-model="tel" placeholder="请输入手机号" class="ipt1">
            <input type="text" v-model="pwd" placeholder="请输入密码" class="ipt2">
            <button class="btn1" @click="forgetpwd">忘记密码？</button>
            <button class="btn2" @click="Login">登录</button>
        </div>
        <div style="margin-top:180px ;margin-left: 142px;">
            <p style="color: darkgrey;">其他登录方式</p>
            <img src="../../../3.png" alt="" style="margin-left: 0px;" @click="phone">
            <img src="../../../2.png" alt="" style="margin-left: 10px;">

        </div>
        <p style="font-size: 13px;color: darkgrey;margin-left: 30px;margin-top: 26px;"><input
                type="radio" />我已阅读并同意<span style="color: rgb(52,120,246);">《服务协议》</span>和<span
                style="color: rgb(52,120,246);">《个人信息保护指引》</span></p>
        <Vcode :show="isshow" :src="imgs" @success="onSuccess" @fail="onFail" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import Vcode from "vue3-puzzle-vcode";
const imgs = ref([
    "https://img1.baidu.com/it/u=3550955980,4041911386&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    "https://pic.rmb.bdstatic.com/bjh/a57559753abfc2172255e5bb38eea7534635.jpeg@h_1280",
]);
const isshow = ref(false); // 控制验证码显示
const isVcodePassed = ref(false); // 验证码是否通过
// 验证码通过后调用的登录逻辑
const handleLogin = async () => {
    try {
        let response = await axios.post("http://localhost:3000/login", {
            phone: tel.value, password: pwd.value 
        });
        if (response.data.code === 200) {
            let accessToken = response.data.accessToken;
            let refreshToken = response.data.refreshToken;
            // 将 token 存储在 localStorage 中
            localStorage.setItem("accessToken", accessToken);
            localStorage.setItem("refreshToken", refreshToken);
            localStorage.setItem("name", response.data.name);
            router.push("/bindtel"); // 登录成功后跳转到首页
            showToast({
                message: "登录成功",
                type: "success",
            });
        } else {
            showToast("用户名或密码错误");
        }
    } catch (error) {
        showToast("登录失败");
    }
};

// 点击登录按钮的逻辑
const Login = async () => {
    // 如果验证码还没有通过，显示验证码
    if (!isVcodePassed.value) {
        isshow.value = true;
        return;
    }

    // 验证码通过后，执行登录逻辑
    handleLogin();
};

// 验证码成功回调
const onSuccess = () => {
    isVcodePassed.value = true; // 验证码通过
    isshow.value = false; // 隐藏验证码
    handleLogin(); // 验证成功后执行登录逻辑
};

// 验证码失败回调
const onFail = () => {
    isshow.value = false; // 验证码验证失败后隐藏验证码
    isVcodePassed.value = false; // 重置验证状态
    showToast("验证失败");
};
const tel = ref('');
const pwd = ref('');
const onClickLeft = () => history.back();
const router = useRouter();
const phone = () => {
    router.push('/register_one')
}
// const login = async () => {
//     let obj = {
//         phone: tel.value,
//         password: pwd.value
//     }
//     let res = await axios.post(`http://localhost:3000/login`, obj)
//     // console.log(res.data);
//     if (res.data.code == 200) {
//         showToast('登录成功');
//         sessionStorage.setItem('tel', tel.value);
//         router.push('/bindtel')
//     }
// }
const forgetpwd = () => {
    router.push('/forgetpwd')
}
</script>

<style lang="scss" scoped>
.p1 {
    font-size: 30px;
    font-weight: 500;
    margin-left: 30px;
}

.p2 {
    font-size: 14px;
    color: #999;
    margin-left: 30px;
}

.ipt1 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.ipt2 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgb(204, 199, 199);
    border-bottom: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.btn1 {
    width: 120px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    border: none;
    position: absolute;
    top: 92px;
    right: 15px;
    color: #999;
}

.btn2 {
    width: 300px;
    height: 50px;
    border: none;
    background-color: rgb(36, 153, 248);
    border-radius: 10px;
    color: white;
    margin-top: 30px;
    margin-left: 45px;
    font-size: 18px
}
</style>